<!-- 这个组件里面 后期就写 上拉加载更多 -->

<script setup lang="ts">
import KnowledgeCard from './KnowledgeCard.vue'
import { ref } from 'vue'
import type { KnowledgeType, KnowledgeParams, Knowledge } from '@/types/consult'
import { getKnowledgePage } from '@/services/consult'
// 接收type值

const props = defineProps<{
  // recommend推荐，fatReduction减脂，food健康饮食like关注医生页面文章
  type: KnowledgeType
}>()

// list 存储的是 后期发送请求 拿到的数据
const list = ref<Knowledge[]>([])
//  控制着 加载状态的效果  为 true 小圆圈 显示   为false  小圆圈 隐藏
const loading = ref(false)
//   finished 为true 表示 全部加载完毕  再次触底 不在加载更多了
const finished = ref(false)

// 拼接发送请求的参数
const params = ref<KnowledgeParams>({
  type: props.type,
  // 当前页码值
  current: 1,
  // 每页数据
  pageSize: 10
})

// 怎么取到type 值呢？？

const onLoad = async () => {
  //  每次触底  会触发这个函  数
  console.log('触底了')

  const res = await getKnowledgePage(params.value)
  console.log(res)
  //  res.data.rows 是一个数组
  //   list.value =  res.data.rows  list 永远只有10条数据
  list.value.push(...res.data.rows)
  // 关闭转圈
  loading.value = false
  // res.data.pageTotal   后端直接告诉我们 总数据有多少也
  if (res.data.pageTotal <= params.value.current) {
    finished.value = true
  }

  params.value.current++
  // list.value.push()

  // 先用一个假的请求来模拟
  // setTimeout(() => {
  //   for (let i = 0; i < 5; i++) {
  //     list.value.push(i)
  //   }
  //   // 关闭加载中 的  小圆圈
  //   loading.value = false

  //   if (list.value.length >= 20) {
  //     finished.value = true
  //   }
  // }, 500)
}
</script>

<template>
  <div class="knowledge-list">
    {{ type }}
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <knowledge-card v-for="(item, i) in list" :key="i" :item="item"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
